<!--
 * @Author: zhang_wenjuan
 * @Date: 2021-05-19 15:55:47
 * @LastEditTime: 2021-07-10 15:08:05
 * @Description: 隐患列表
-->

<template>
    <div id="hiddenDanger_page">
        <!-- 查询条件 -->
        <div class="selectPart">
            <!-- 选择隐患状态 -->
            <div class="topLine">
                <span class="title">隐患状态：</span>
                <span class="field" style="width: calc(100% - 45px);" @click="shStatusPop = true">{{hideDangerState}}</span>
            </div>
            <div class="bottomLine" style="position:relative;">
                <span class="title">发现时间：</span>
                <span class="field" @click="showStartTime = true">{{startTime1}}</span>
                <img :src="iocn.time" @click="showStartTime = true" style="width: 30px;height: 30px;position: absolute;left: 47%;"/>
                <span class="zhi">-</span>
                <span class="field" @click="showEndTime = true">{{endTime1}}</span>
                <img :src="iocn.time" @click="showEndTime = true" style="width: 30px;height: 30px;position: absolute;right: 0;"/>
            </div>
        </div>
        <!-- 任务列表 -->
        <div class="listPart">
            <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
                <van-list
                  offset="0"
                  v-model="loading"
                  :finished="finished"
                  finished-text="没有更多了"
                  @load="onLoad"
                >
                    <div class="defectItem" v-for="(item,i) of hiddenDangerList" :key="i" @click="toDetail(item)">
                        <van-button type="primary" :color="showColor(item.hazardStatus)" size="small">{{item.hazardStatus | dealStatus}}</van-button>
                        <div style="margin-top: 10px;margin-bottom: 10px;">
                            <span style="color: #333;font-size:14px">{{item.hazardDescription}}</span>
                        </div>
                        <div>
                            <span>发现时间：</span>
                            <label style="color: #333;">{{item.discoveryDate | formatTime}}</label>
                        </div>
                    </div>
                </van-list>
            </van-pull-refresh>
        </div>
        <!-- 隐患状态下拉弹窗 -->
        <van-popup v-model="shStatusPop" get-container="#app" position="bottom">
            <van-picker show-toolbar title="隐患状态" :columns="statusArr" position="bottom" @confirm="confirmStatus" @cancel="shStatusPop = false" />
        </van-popup>
        <!-- 发现时间下拉弹窗(开始) -->
        <van-popup v-model="showStartTime" get-container="#app" position="bottom">
            <van-datetime-picker type="datetime" title="选择日期" @confirm="confirmTime('start')" v-model="startTime2" 
            :min-date="minDate"
            :formatter="formatter"
            :max-date="maxDate"
            @cancel="showStartTime = false" />
        </van-popup>
        <!-- 发现时间下拉弹窗(结束) -->
        <van-popup v-model="showEndTime" get-container="#app" position="bottom">
            <van-datetime-picker type="datetime" title="选择日期"  @confirm="confirmTime('end')" v-model="endTime2" 
            :min-date="minDate"
            :formatter="formatter"
            :max-date="maxDate"
            @cancel="showEndTime = false" />
        </van-popup>

        <van-popup v-model="showDetail" get-container="#app" position="bottom">
            <Detail :hiddenDangerInfo="hiddenDangerInfo" @closeDetail="showDetail=false"></Detail>
        </van-popup>
    </div>
</template>
<script type="text/javascript">
import Util from '@/utils/util'
import Detail from "./dangerRecordDetail"
import {getHazardList} from '../../api/tourTask';
export default {
    name: "defectList",
    components:{
        Detail
    },
    props:{
        deviceinfo:{
            type:Object,
            default: function() {
                return {}
            }
        }
    },
    data() {
        return {
            hiddenDangerList:[
                // {}
            ],
            // 隐患状态
            status:"",
            //是否展示隐患状态
            shStatusPop:false,
            // 隐患状态下拉数组
            statusArr:["全部","未消除","已消除"],
            //是否展示开始时间
            showStartTime:false,
            //是否展示结束时间
            showEndTime:false,
            // 开始时间
            startTime1:"",
            startTime2:new Date(),
            // 结束时间
            endTime1:"",
            endTime2:new Date(),
            hideDangerState: "",//隐患状态
            hideDangerStateId: "",//隐患状态code值
            iocn: {
                "time": require("@assets/img/mainIndex/time.png"),
            },
            pageNum: 0,
            pageSize: 10,
            finished:false,
            loading:false,
            refreshing: false,
            showDetail:false,//详情显示flag
            hiddenDangerInfo: {},//隐患详细信息
            minDate: new Date(new Date().getFullYear()-2,new Date().getMonth()+1,new Date().getDay()),
			maxDate: new Date(new Date().getFullYear()+2,new Date().getMonth()+1,new Date().getDay())
        }
    },
    computed:{
        showColor() {
            return function(val) {
                var color = "#eb3b3b";//红色
                if(val == "4") {
                    color = "#1481ee";//蓝色
                }
                return color;
            }
        }
    },
    methods: {
        //日期格式
        formatter(type, val) {
            if (type === 'year') {
                return val + '年';
            }
            if (type === 'month') {
                return val + '月';
            }
            if (type === 'day') {
                return val + '日';
            }
            if (type === 'hour') {
                return val + '时';
            }
            if (type === 'minute') {
                return val + '分';
            }
            return val;
        },

        /**
         * @description: 确认选择隐患状态
         * @param {String} val 隐患状态
         */ 
        confirmStatus(val){
            this.hideDangerStateId = val.code;
            this.hideDangerState = val.text;
            this.shStatusPop = false;
            this.pageNum = 1;
            this.hiddenDangerList = [];
            this.getHideDangerRecord();
        },

        /**
         * @description: 确认选择时间
         * @param {String} type 确认类型
         */ 
        confirmTime(type){
            if(type=="start"){
                this.showStartTime = false
                this.startTime1 = Util.DateUtil.getFormatDateByLong(this.startTime2,'yyyy-MM-dd hh:mm')
            }else{
                this.showEndTime = false
                this.endTime1 = Util.DateUtil.getFormatDateByLong(this.endTime2,'yyyy-MM-dd hh:mm')
            }
            if(this.startTime1 && this.endTime1) {
                var start = new Date(this.startTime1).getTime()
                var end = new Date(this.endTime1).getTime()
                if(end = start || start < end) {
                    this.pageNum = 1;
                    this.hiddenDangerList = [];
                    this.getHideDangerRecord();
                }else{
                    this.$Toast.fail("开始时间不能大于结束时间！")
                }
            }
        },
        
        /**
         * @description: 跳转至隐患详情
         * @param {Object} item 当前点击的隐患
         */ 
        toDetail(item){
            this.showDetail = true;
            this.hiddenDangerInfo = item;//隐患详细信息
        },
        /**
         * @description: 获取指定设备隐患记录
         * @param {*}
         * @return {*}
         */
         getHideDangerRecord() {
            var self = this,startTime="",finishTime="";
            if(this.startTime1 && this.endTime1) {
                startTime = new Date(this.startTime1).getTime();
                finishTime = new Date(this.endTime1).getTime();
            }
            var params = {
                //deviceId: this.deviceinfo.deviceId,
                deviceId: "175680146",
                pageNum: this.pageNum,
                pageSize: this.pageSize,
                userId: this.userInfo.userId,//用户id
                roleCode: "",//用户角色
            }
            if(this.hideDangerStateId) {
                params.hazardStatus = this.hideDangerStateId;
            }
            if(finishTime) {
                params.endTime = finishTime;
            }
            if(startTime) {
                params.startTime = startTime;
            }
            this.$Toast.loading({
                    duration: 0,//展示时长 0不会消失
                    message: "巡视设备隐患记录获取中...",
                    forbidClick: true,//是否禁止背景点击
                    overlay: true//是否显示背景遮罩层
                })
            getHazardList(params).then(data => {
                self.$Toast.clear();
                if(self.refreshing){
                    self.refreshing = false
                }
                self.pageNum = data.pageInfo.pageNum;//当前页数
                console.log("data.pageInfo.pageNum",data.pageInfo.pageNum)
                if(self.pageNum == data.pageInfo.pages || data.pageInfo.pages == 0) {
                    self.finished = true
                }else{
                    self.finished = false;
                }
                self.loading = false;//加载完成
                if(data.success) {
                    self.$Toast.success(data.msg)
                    self.hiddenDangerList.push(...data.data);//隐患记录
                }else{
                    self.$Toast.fail(data.msg)
                }
            }).catch(err => {
                self.finished = true
                self.loading = false;//加载完成
                self.$Toast.fail(err)
            })
        },
        arrChange(arr) {
            if(arr.length != 0) {
                arr.forEach(item => {
                    item["text"] = item.name;
                })
                return arr;
            }
            return [];
        },
        /**
        * @description: 列表下拉刷新
        * @param {*}
        * @return {*}
        */
        onRefresh() {
            //清空列表数据
            this.finished = false;
            // 重新加载数据
            // 将 loading 设置为 true，表示处于加载状态
            this.pageNum = 1;
            this.hiddenDangerList = [];
            this.getHideDangerRecord();
        },
        /**
        * @description: 上拉加载更多数据
        * @param {*}
        * @return {*}
        */
        onLoad() {
            this.pageNum++;
            this.getHideDangerRecord();
        },
    },
    watch:{
        
    },
    filters: {
        formatTime(val) {
            var time = "";
            if(val){
                time = Util.DateUtil.getFormatDateByLong(val,'yyyy-MM-dd hh:mm') 
            }
            return time;
        },
        dealStatus(val) {
            var statusName = "";
            switch(val) {
                case "0" : statusName="隐患登记";break;
                case "1" : statusName="审核";break;
                case "2" : statusName="隐患处理";break;
                case "3" : statusName="消除确认";break;
                case "4" : statusName="结束";break;
            }
            return statusName;
        }
    },
    created(){
        var userInfo = localStorage.getItem("userInfo");
		this.userInfo = JSON.parse(userInfo);
    },
    mounted() {
        this.statusArr = this.arrChange(Util.baseUtil.getSpecialCode("HAZARD_STATUS"));//隐患状态
    },
}
</script>
<style scoped>
#hiddenDanger_page {
    width: 100%;
    height: 100%;   
    padding-bottom: 0;
    /* padding-top: 46px; */
    background: #fff;
}
.van-nav-bar {
    background: #17b49b;
}
.van-nav-bar /deep/ .van-icon {
    color: #fff;
    font-size: 1.125rem;
}
.scan {
    margin: 0 10px;
}
.van-nav-bar /deep/ .van-nav-bar__title {
    color: #fff;
    font-size: 1.125rem;
}
.van-nav-bar /deep/ .van-button {
    margin-right: 10px;
}
/* 筛选区域 */
.selectPart {
    height: 80px;
    padding: 15px;
    background: #fff;
    font-size: 0.75rem;
    color: #666;
    position: fixed;
    top: 10px;
    width: calc(100% - 30px);
}
.selectPart .topLine {
    display: flex;
    margin-bottom: 10px;
}
.selectPart .title {
    display: inline-block;
    width: 65px;
    height: 25px;
    line-height: 25px;
}
.selectPart .field {
    border: 1px solid #eee;
    display: inline-block;
    width: 120px;
    height: 28px;
    line-height: 28px;
    text-align: left;
    width: 40%;
    padding: 0 10px;
    box-sizing: border-box;
}
.selectPart .bottomLine{
    display: flex;
}
.selectPart .bottomLine .zhi {
    height: 25px;
    line-height: 25px;
    margin: 0 10px;
}
/* 任务列表 */
.listPart {
    margin-top: 120px;
    padding: 0 10px 10px;
    height: calc(100% - 166px);
    overflow-y: auto;
    background: #fff;
}
.defectItem {
    background: #fafafa;
    margin-bottom: 10px;
    border-radius: 5px;
    padding: 10px 15px;
    color: #8f8f94;
    font-size: 0.875rem;
}
.van-button--small{
    height: 28px;
}
</style>
